<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Captive</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>


<script>

	var init = 5;
	
	$(document).ready(
		function() {
			document.getElementById("dialog").style.display="inherit";
			document.getElementById("background").style.display="inherit";
			document.getElementById("peopleimage").src="images/child.png";
			document.getElementById("dialog").innerHTML = "Jimmy says: <br/>Dad?";
			$("#dialog").click(dialog1);
		}
	);
	
	function dialog1()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/blank.png";
		document.getElementById("dialog").innerHTML = "I say: <br/>Jimmy, are you okay? Did you get hurt?";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog2);
		}
	}
	
	function dialog2()
	{
		$("#dialog").unbind('click');
		document.getElementById("peopleimage").src="images/child.png";
		document.getElementById("dialog").innerHTML = "Jimmy says: <br/>I am fine....I guess.";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog3);
		}
	}
	
	function dialog3()
	{
		document.getElementById("peopleimage").src="images/blank.png";
		document.getElementById("dialog").innerHTML = "I say: <br/><div onclick=\"decrease1()\">1. You guess? Jimmy, did you get hurt?</div><div onclick=\"increase1()\">2. Jimmy, are you free to talk now?</div>";
		$("#dialog").unbind('click');
	}
	
	function decrease1()
	{
		init--;
		dialog4();
		$("#dialog").unbind('click');
	}
	
	function increase1()
	{
		init++;
		dialog4_1();
		$("#dialog").unbind('click');
	}
	
	function dialog4()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Jimmy says: <br/>No, I didn't.";
		document.getElementById("peopleimage").src="images/child.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog5);
		}
	}
	
	function dialog4_1()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Jimmy says: <br/>Yes, I am free to talk.";
		document.getElementById("peopleimage").src="images/child.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog5);
		}
	}
	
	function dialog5()
	{
		document.getElementById("dialog").innerHTML = "I say: <br/><div onclick=\"increase2()\">1. How did you get kidnapped?</div><div onclick=\"decrease2()\">2. Is the kidnapper around? Be careful with what you say.</div>";
		document.getElementById("peopleimage").src="images/blank.png";
		$("#dialog").unbind('click');
	}
	
	function decrease2()
	{
		
		init--;
		dialog6();
		$("#dialog").unbind('click');
	}
	
	function increase2()
	{
		init++;
		dialog6_1();
		$("#dialog").unbind('click');
	}
	
	function dialog6()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Jimmy says impatiently: <br/>No, he's not around. I checked.";
		document.getElementById("peopleimage").src="images/child.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog7);
		}
	}
	
	function dialog6_1()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Jimmy says: <br/>I'm not sure if I want to talk about it....";
		document.getElementById("peopleimage").src="images/child.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog7);
		}
	}
	
	function dialog7()
	{
		document.getElementById("dialog").innerHTML = "I say: <br/><div onclick=\"increase3()\">1. You know what to do, right? Don't try to upset the kidnapper.</div><div onclick=\"decrease3()\">2. Stay put, okay? Don't do anything foolish. I will get you out of there.</div>";
		document.getElementById("peopleimage").src="images/blank.png";
		$("#dialog").unbind('click');
	}
	
	function decrease3()
	{
		
		init--;
		dialog8();
		$("#dialog").unbind('click');
	}
	
	function increase3()
	{
		init++;
		dialog8();
		$("#dialog").unbind('click');
	}
	
	function dialog8()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Jimmy says: <br/>Dad, could you stop treating me like a baby? I think I can handle this side of the situation on my own.";
		document.getElementById("peopleimage").src="images/child.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog9);
		}
	}
	
	function dialog9()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "I say angrily: <br/>Jimmy, you've got to communicate with me and give me more information so I can help!";
		document.getElementById("peopleimage").src="images/blank.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(endscene);
		}
	}
	
	function endscene()
	{
		if(init>=8)
			window.location = "scene1-3.php";
		else if(init<=2)
			window.location = "scene1-1.php";
		else
			window.location = "scene1-2.php";
	}
	
</script>



</head>

<body>


<div id="container">
	<div id="background"><img src="images/office.jpg" /></div>
	<div id="dialog">
	</div>
	<div id="people"><img id="peopleimage" src=""></div>
</div>




</body>
</html>